<script setup lang='ts'>
import qs from 'qs';
import "vue3-layer/dist/s3Layer.css";
import { ElMessage } from "element-plus";
import { useRoute } from "vue-router";
import { emitter } from "@/utils/mitt";
import { htmlDecode } from "@/utils/public/method"
import {
  taskGetTaskDetail,
  LoadResourcesGetTaskDatail,
  OperationLogGetLogByBusinessType
} from "@/api/stu/CaseAnalysisRecord";
import { ref, onMounted, nextTick, reactive, onBeforeUnmount, computed } from "vue";
const route = useRoute();
const dataList = ref<any>([]);
const pagination = reactive({
  total: 0,
  pageSize: 20,
  currentPage: 1,
  pageSizes: [10, 20, 50, 100],
  background: true
});
const TaskDetailContent = reactive({
  name: "",
  remark: "",
  important: ""
});
const TaskDetail = ref<any>();
const columns = [
  {
    label: "序号",
    type: "index",
    width: 80
  },
  {
    label: "操作时间",
    prop: "operationTime",
  },
  {
    label: "操作账号",
    prop: "userId",
  },
  {
    label: "操作模块",
    prop: "operationModel",
  },
  {
    label: "操作菜单",
    prop: "operationMenu"
  },
  {
    label: "当前操作",
    prop: "remarks",
  },
];
const dialogVisible = ref(false);
const dialogVisibles = ref(false);
// const BefoWindow = ref(true);
// 获取查看任务详情
async function GetTaskDetail() {
  const data = qs.stringify({ taskId: route.query.taskId });
  const res = await taskGetTaskDetail(data);
  if (res.success) {
    TaskDetailContent.name = res.data.taskName;
    TaskDetailContent.remark = htmlDecode(res.data.remark);
    TaskDetailContent.important = htmlDecode(res.data.important);
    dialogVisible.value = true;
  } else {
    ElMessage.error(res.msg)
  }
}

// 获取查看操作日志
async function GetOperationLog() {
  const data = {
    pageIndex: pagination.currentPage,
    pageCount: pagination.pageSize,
    taskId: route.query.taskId,
    planId: route.query.planId,
    BusinessType: JSON.parse(sessionStorage.getItem("moduleId"))
  }
  const res = await OperationLogGetLogByBusinessType(data);
  if (res.success) {
    dataList.value = res.data?.items;
    pagination.total = res.data.totalCount;
  } else {
    ElMessage.error(res.msg);
  }
}

// python与大数据、 大数据应用案例 的任务详情
// python与大数据 ：1、  大数据应用案例：2

async function GetMyTaskDetail() {
  TaskDetail.value = null;
  const data = qs.stringify({ requestType: TitleType.value });
  const res = await LoadResourcesGetTaskDatail(data);
  if (res.success) {
    TaskDetail.value = res.data;
    dialogVisibles.value = true;
  } else {
    ElMessage.warning(res.msg)
  }
}

function handleSizeChange() { GetOperationLog() }
function handleCurrentChange() { GetOperationLog() }
// 拖拽窗口大小
function resizing(e) {
  e[0].style.height = (e[0].offsetHeight - 10) + 'px';
}

const TitleType = computed(() => {
  let nums = 0;
  if (route.meta.title.includes("python"))
    nums = 1;
  else if (route.meta.title.includes("应用案例"))
    nums = 2;
  return nums
})

onMounted(() => { });

emitter.on("show_Dialog", () => {
  if (TitleType.value) {
    GetMyTaskDetail()
  } else {
    GetTaskDetail()
    GetOperationLog()
  }
});

onBeforeUnmount(() => {
  TaskDetailContent.name = "";
  TaskDetailContent.remark = "";
  TaskDetailContent.important = ""
  // BefoWindow.value = false;
  try {
    document.querySelector(".layui-layer").style.display = "none";
  } catch (error) {
    return
  }

})

</script>

<template>
  <div>
    <s3-layer v-model="dialogVisible" :area="['850px', '600px']" :maxmin="true" :btn="[]" :closeBtn="1" :shade="0"
      :title="`任务名称：${TaskDetailContent.name}`" @resizing="resizing">
      <div class="task_content">
        <el-tabs class="demo-tabs">
          <el-tab-pane label="任务说明">
            <div class="isremark">
              <dl>
                <dt>任务说明</dt>
                <dd class="TaskDetailRemark" v-html="TaskDetailContent.remark"></dd>
              </dl>
              <dl v-if="TaskDetailContent.important != ''">
                <dt>重要提示</dt>
                <dd class="TaskDetailRemark" v-html="TaskDetailContent.important"></dd>
              </dl>
            </div>
          </el-tab-pane>
          <el-tab-pane label="操作日志">
            <pure-table border align-whole="center" showOverflowTooltip table-layout="auto" size="small" :data="dataList"
              :columns="columns" :pagination="pagination" max-height="400px" :header-cell-style="{
                background: 'var(--el-table-row-hover-bg-color)',
                color: 'var(--el-text-color-primary)'
              }" @size-change="handleSizeChange" @current-change="handleCurrentChange">
            </pure-table>
          </el-tab-pane>
        </el-tabs>
      </div>
    </s3-layer>
    <s3-layer v-model="dialogVisibles" :area="['850px', '600px']" :maxmin="true" :btn="[]" :closeBtn="1" :shade="0"
      title="我的任务" @resizing="resizing">
      <div class="mytasklist">
        <dl>
          <dd><span>已完成</span>：<span style="color: green;">&#10004</span> </dd>
          <dd><span>未完成</span>：<span style="color: red;">&#10006</span> </dd>
        </dl>
        <table class="table_thead">
          <thead v-if="TitleType == 1">
            <tr>
              <th width="25%">
                模块名称
              </th>
              <th width="30%">
                菜单名称
              </th>
              <th width="15%">
                学习资源
              </th>
              <th width="15%">
                学习测评
              </th>
              <th width="15%">
                实验操作
              </th>
            </tr>
          </thead>
          <thead v-if="TitleType == 2">
            <tr>
              <th width="30%">
                案例类别
              </th>
              <th width="30%">
                案例名称
              </th>
              <th width="20%">
                案例测评
              </th>
              <th width="20%">
                案例分析
              </th>
            </tr>
          </thead>
        </table>
        <div class="table_tbody" v-html="TaskDetail"></div>
        <p class="table_tips_text" v-if="TitleType == 1">完成得分=同时完成（学习资源+学习测评+实验操作）数/任务总数*100</p>
        <p class="table_tips_text" v-if="TitleType == 2">完成得分=同时完成（案例测评+案例分析）数/任务总数*100</p>
      </div>
    </s3-layer>
  </div>
</template>
<style>
/* 拖拽窗口 固定样式 */
.layui-layer {
  z-index: 55 !important;
}

.layui-layer-title {
  font-size: 18px;
  font-weight: bold;
  background-color: #eaf2ff;
  color: #6489CF;
}

.layui-layer-content {
  padding: 5px 10px !important;
}

.layui-layer-setwin {
  /* background-color: #80B0FF; */
  background-color: #d8d8d8;
  padding: 5px 4px;
  border-radius: 50px;
  color: white;
  top: 10px;
}

.layui-layer-setwin a {
  margin-left: 2px;
}
</style>

<style scoped>
:deep(.el-tabs__item) {
  color: #1749A6;
  background: url(@/assets/studen/images/rn_no_active.png) no-repeat;
  background-position: center;
  background-size: 100% 100%;
  padding: 0 20px;
  margin-right: 20px;
}

:deep(.el-tabs__item.is-active) {
  color: white;
  background: url(@/assets/studen/images/rn_is_active.png) no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

:deep(.el-tabs--top .el-tabs__item.is-top:nth-child(2)) {
  padding-left: 20px;
}

:deep(.el-tabs__item.is-top:last-child) {
  padding-right: 20px;
}

:deep(.el-tabs__active-bar) {
  background-color: transparent;
}

.mytasklist {
  border: 1px solid #EEEEEE;
}

.mytasklist .table_thead {
  width: 100%;
  background-color: #f2f6fd;
  height: 38px;
  line-height: 38px;
}

.table_tbody {
  height: calc(500px - 100px);
  overflow: auto;
}

.table_tips_text {
  line-height: 30px;
  background: #eaf2ff;
  padding: 0 10px;
}

.mytasklist :deep(.wcqk_tab) {
  background-color: #fff;
}

.mytasklist :deep(.wcqk_tab tr td) {
  border: 1px solid #EEEEEE;
}

.mytasklist dl {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  line-height: 38px;
  font-size: 16px;
}

.mytasklist dl dd {
  padding-right: 15px;
}

:deep(.cha-icon) {
  color: red;
}

:deep(.gou-icon) {
  color: green;
}

/* ------- */
.isremark dl dt {
  font-size: 16px;
  font-weight: bold;
  margin: 15px 0;
}

.TaskDetailRemark {
  height: 100%;
}

:deep(.TaskDetailRemark table tr td) {
  border: 1px solid;
}
</style>
